<template>
	<view class="bgf9">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper style="height: 100vh;" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
					<view class="w90" v-for="(item,idx) in yhj.list">
						<view class="w50">
							<view style="width: 25%;height: 100rpx;">
								<image class="yhjimgs" src="@/static/22.png" mode=""></image>
							</view>
							<view style="width: 75%;height: 100rpx;">
								<view class="fs15" style="margin-left:15rpx ;">
									满{{item.meet}}可用
								</view>
								<view class="fs10 content">
									<view>获取时间：{{item.overdue_time}}</view>
									<view>截止日期：{{item.overdue_time}}</view>
								</view>
							</view>
						</view>
						<view class="w25">
							<view style="color: red;">￥ <text class="fs20">{{item.money}}</text> </view>
							<view class="btn" v-if="item.is_usable" @click="getBack(item.id,item.money,item.is_usable)">
								去使用</view>
							<view class="btn" v-else @click="getBack(item.id,item.money,item.is_usable)">不可用</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="onreachBottom">
					通用红包
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '店铺红包'
				}, {
					name: '通用红包'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				yhj: 0, //店铺红包的id
				dppacket: {}, //店铺红包信息
				num: '', //商品总价
			};
		},
		onLoad(options) {
			// this.current, this.swiperCurrent = 1
			this.yhj = JSON.parse(decodeURIComponent(options.id));
			console.log(this.yhj.list, 'aaaaaaaa')
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			getBack(oid, omoney, otitle) {
				if (otitle) {
					var discount = {}
					discount.id = oid
					discount.money = omoney
					console.log(discount,)
					this.$store.commit('Discount', discount)
				}
				this.backPageRefresh()
			},
			// 返回刷新
			backPageRefresh() {
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 前一个页面
				console.log("beforePage", beforePage);
				console.log(pages);
				uni.navigateBack({
					delta: 1,
					success: function() {
						beforePage.$vm.refreshRequest(); // 执行前一个页面的刷新
					}
				});
			}
		}
	};
</script>

<style>
	.w90 {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		background: #FFFFFF;
	}

	.w25 {
		width: 30%;
		height: 100%;
		text-align: center;
		padding: 30rpx 30rpx 30rpx 0;
	}

	.w50 {
		width: 70%;
		padding: 30rpx 0 30rpx 30rpx;
		display: flex;
	}

	.content {
		text-align: center;
	}

	.yhjimgs {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.btn {
		width: 120rpx;
		padding: 5rpx 15rpx;
		margin: 0 auto;
		color: #FFFFFF;
		background: black;
		border-radius: 20rpx;
	}
</style>
